<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Import jQuery -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../icons/element-icons.woff">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/normal.css">
    <script type="module" src="../js/sidebar.js"></script>
</head>

<body>
    <div id="app">
        <div class="app-wrapper" :class="{'sidebar-hide':isActive}">
            <div class="sidebar-container" :span="4">
                <el-scrollbar max-height="1080px">
                    <el-menu mode="vertical" :show-timeout="100" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                        background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
                        <el-menu-item index="0">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                          </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                              <i class="el-icon-s-goods"></i>
                              <span>商品</span>
                            </template>
                              <el-menu-item index="1-1">商品列表</el-menu-item>
                              <el-menu-item index="1-2">添加商品</el-menu-item>
                              <el-submenu index="1-3"><span slot="title">商品分类</span>
                                <el-menu-item index="1-3-1">猫</el-menu-item>
                                <el-menu-item index="1-3-2">狗</el-menu-item>
                                <el-menu-item index="1-3-3">鱼</el-menu-item>
                                <el-menu-item index="1-3-4">鸟</el-menu-item>
                                <el-menu-item index="1-3-5">爬行类</el-menu-item>
                              </el-submenu>
                          </el-submenu>
                          <el-menu-item index="2">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">订单</span>
                          </el-menu-item>
                          <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">待开发</span>
                          </el-menu-item>
                          <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                          </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container" :span="20">
                  <el-menu class="navbar" mode="horizontal">
                    <div class="hamburger-container" :toggleClick="toggleSideBar" :isActive="opened">
                        <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                          <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                            p-id="1692"></path>
                          <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                            p-id="1693"></path>
                          <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                            p-id="1694"></path>
                        </svg>
                      </div>
                    <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
                      <div class="avatar-wrapper">
                        <img class="user-avatar" >
                        <i class="el-icon-caret-bottom"></i>
                      </div>
                      <el-dropdown-menu class="user-dropdown" slot="dropdown">
                        <a class="inlineBlock" to="/">
                          <el-dropdown-item command="home">
                            首页
                          </el-dropdown-item>
                        </a>
                        <el-dropdown-item divided>
                          <span @click="logout" style="display:block;">退出</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-menu>
            </div>
        </div>
    </div>
</body>
</html>